<!--
 * @Description  :
 * @Autor        : guoxi
 * @Date         : 2022-05-25 11:27:03
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-05-27 09:38:50
-->
<template>
  <div v-loading="info.loading" class="iframe-box">
    <i class="download el-icon-download" @click="handleDownload" />
    <!-- <el-icon class="close" @click="$router.go(-1)"><close /></el-icon>
    <el-icon class="download" @click="handleDownload"><document /></el-icon> -->
    <iframe
      ref="iframe"
      class="priview"
      :src="info.iframeSrc"
      frameborder="0"
    />

  </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { download } from "/@/utils/download";
import { Base64 } from "js-base64";
import { isImg } from "/@/utils/is";
//引入样式

const iframe = ref(null);
// import "highlight.js/styles/default.css";
const route = useRoute();
let info = reactive({
  iframeSrc: "",
  loading: true
});

const handleDownload = () => {
  download({ uuidFile: route.query?.uuidFile, fileName: route.query.fileName });
};

onMounted(async () => {
  let url = `${
    import.meta.env.VITE_DOWNLOAD_URL
  }/rdms-admin/open/download?uuidFile=${route.query.uuidFile}&fullfilename=${
    route.query.fileName
  }`;
  if (isImg(route.query.fileName)) {
    url = `${
      import.meta.env.VITE_DOWNLOAD_IMAGE_URL
    }/rdms-admin/open/download?uuidFile=${route.query.uuidFile}&fullfilename=${
      route.query.fileName
    }`;
  }
  const previewUrl = import.meta.env.VITE_PREVIEW_URL;
  info.iframeSrc =
    previewUrl + "/onlinePreview?url=" + encodeURIComponent(Base64.encode(url));
  iframe.value.onload = () => {
    info.loading = false;
  };
});
</script>

<style lang="scss" scoped>
.iframe-box {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.priview {
  width: 100%;
  height: 100%;
}
.close {
  position: absolute;
  font-size: 36px;
  color: #fff;
  right: 40px;
  top: 20px;
  cursor: pointer;
}
.download {
  position: absolute;
  font-size: 36px;
  color: #fff;
  right: 80px;
  top: 20px;
  cursor: pointer;
}
</style>
